import { Spec } from '@uwdata/mosaic-spec';

export const spec : Spec = {
  "meta": {
    "title": "Seattle Weather",
    "description": "An interactive view of Seattle's weather, including maximum temperature, amount of precipitation, and type of weather. By dragging on the scatter plot, you can see the proportion of days in that range that have sun, fog, drizzle, rain, or snow.\n",
    "credit": "Based on a [Vega-Lite/Altair example](https://vega.github.io/vega-lite/examples/interactive_seattle_weather.html) by Jake Vanderplas."
  },
  "data": {
    "weather": {
      "file": "data/seattle-weather.parquet"
    }
  },
  "params": {
    "click": {
      "select": "single"
    },
    "domain": [
      "sun",
      "fog",
      "drizzle",
      "rain",
      "snow"
    ],
    "colors": [
      "#e7ba52",
      "#a7a7a7",
      "#aec7e8",
      "#1f77b4",
      "#9467bd"
    ]
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "plot": [
            {
              "mark": "dot",
              "data": {
                "from": "weather",
                "filterBy": "$click"
              },
              "x": {
                "dateMonthDay": "date"
              },
              "y": "temp_max",
              "fill": "weather",
              "r": "precipitation",
              "fillOpacity": 0.7
            },
            {
              "select": "intervalX",
              "as": "$range",
              "brush": {
                "fill": "none",
                "stroke": "#888"
              }
            },
            {
              "select": "highlight",
              "by": "$range",
              "fill": "#ccc",
              "fillOpacity": 0.2
            },
            {
              "legend": "color",
              "as": "$click",
              "columns": 1
            }
          ],
          "xyDomain": "Fixed",
          "xTickFormat": "%b",
          "colorDomain": "$domain",
          "colorRange": "$colors",
          "rDomain": "Fixed",
          "rRange": [
            2,
            10
          ],
          "width": 680,
          "height": 300
        }
      ]
    },
    {
      "plot": [
        {
          "mark": "barX",
          "data": {
            "from": "weather"
          },
          "x": {
            "count": null
          },
          "y": "weather",
          "fill": "#ccc",
          "fillOpacity": 0.2
        },
        {
          "mark": "barX",
          "data": {
            "from": "weather",
            "filterBy": "$range"
          },
          "x": {
            "count": null
          },
          "y": "weather",
          "fill": "weather"
        },
        {
          "select": "toggleY",
          "as": "$click"
        },
        {
          "select": "highlight",
          "by": "$click"
        }
      ],
      "xDomain": "Fixed",
      "yDomain": "$domain",
      "yLabel": null,
      "colorDomain": "$domain",
      "colorRange": "$colors",
      "width": 680
    }
  ]
};
